<template>
  <el-table
    :header-cell-style="{
      color: '#131416',
      fontsize: '0.875rem',
      fontWeight: 'Bold',
      fontFamily: 'Microsoft YaHei',
      backgroundColor: '#F8F8F8',
      height: '2.5rem',
    }"
    :row-style="{ height: '3.375rem' }"
    :cell-style="{}"
    :data="listArr"
    style="
      margin: 1.25rem 0 3.125rem 0;
      padding-left:2rem
      border-top: 1px solid #e6e6e6;
      border-radius: 2px;
      width:91.25rem;
    "
  >
    <el-table-column
      @click="showData = true"
      prop="user"
      label="操作人"
      width="200"
    >
      <template slot-scope="scope">
        <el-popover
          trigger="hover"
          placement="bottom"
          :popper-options="{
          boundariesElement: 'body',
          gpuAcceleration: false,
          }"
        >
          <el-table 
            :data="scope.row.downLoadDetails"
            style="
             left:3rem;
             margin-left: 6.25rem;
            ">
              <el-table-column  type="index" label="记录"  width="60" />
              <el-table-column prop="time" label="下载时间" width="300">
                <template slot-scope="scope">
                  <span>{{scope.row.time | dataFormat('YYYY-MM-DD HH:mm:ss')}}</span>
                </template>
              </el-table-column>
          </el-table>
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.user }}</el-tag>
          </div>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column prop="lastDownLoad" label="最后一次提取时间"  align="center">
      <template slot-scope="scope">
        <span>{{scope.row.lastDownLoad | dataFormat('YYYY-MM-DD HH:mm:ss')}}</span>
      </template>
    </el-table-column>
    <el-table-column prop="count" label="累计下载次数" align="center" >
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  props: ['id'],
  data() {
    return {
      // 表格数据
      extractData: [],
      listArr: [],
      showData: false,
    };
  },
  mounted(){
    this.getTableData(this.id);
  },
  methods: {
    // 获取表格数据
    getTableData(pk) {
      let listMap = new Map();
      this.$url
        .get('data/anonymized/downloadsource/' + pk)
        .then((res) => {
          if (res.status === 200) {
            this.extractData = res.data.data;
            let arr = [];
            let index = -1;
            this.extractData.forEach((item) => {
              arr = this.listArr.filter((user) => {
                return user.user === item.user;
              });
              if (arr.length) {
                index = this.listArr.findIndex((user) => {
                  return user.user === arr[0].user;
                });
                if (
                  new Date(item.time).getTime() >
                  new Date(this.listArr[index].lastDownLoad).getTime()
                ) {
                  this.listArr[index].lastDownLoad = item.time;
                }
                this.listArr[index].downLoadDetails.push(item);
                this.listArr[index].count++;
              } else {
                this.listArr.push({
                  user: item.user,
                  lastDownLoad: item.time,
                  count: 1,
                  downLoadDetails: [item],
                });
              }
            });
          }
        })
        .catch((err) => {});
    },
  },
};
</script>

<style scoped>

.el-popover { 
   transform-origin: center top; 
   position: relative;
   left: 360px !important;
   top: 783px; 
}
.el-table--enable-row-transition{
  margin-left: 0 !important;
}

</style>
